<template>
    <h1>用户购买理财明细</h1>

    理财编号:
    <input type="text" v-model="Id">
    理财名称:
    <input type="text" v-model="Name">
    
    <input type="button" value="查询" @click="ShowUserFinanCing()">

    <table>
        <thead>
            <tr>
                <th>理财名称</th>
                <th>最低金额</th>
                <th>年收益</th>
                <th>风险等级</th>
                <th>利息</th>
                <th>用户理财金额</th>
                <th>用户理财时间</th>
                <th>登录人</th>
            </tr>
        </thead>

        <tbody>
            <tr v-for=" item in info">
                <td>{{ item.F_Name }}</td>
                <td>{{ item.F_MinMoney }}</td>
                <td>{{ item.F_Year }}</td>
                <td>{{ item.F_Fxiao }}</td>
                <td>{{ item.I_Money }}</td>
                <td>{{ item.UF_Money }}</td>
                <td>{{ item.UF_Date.substring(0,10) }}</td>
                <td>{{ item.U_Name }}</td>
            </tr>
        </tbody>

    </table>

    共有{{ page.totalCount }}条记录，每页显示{{ page.PageSize }}条，共{{ page.PageIndex }}/{{ page.PageCount }}页

    <a href="#" @click="Size(1)" >首页</a>&nbsp;&nbsp;
    <a href="#" @click="Size(page.PageIndex-1)" >上一页</a>&nbsp;&nbsp;
    <a href="#" @click="Size(page.PageIndex+1)" >下一页</a>&nbsp;&nbsp;
    <a href="#" @click="Size(page.PageCount)">尾页</a>&nbsp;&nbsp;

    <input type="text" v-model="npageIndex" style="width: 40px;">
    <input type="button" value="跳转" @click="Jump()">

</template>

<script setup lang="ts">

import { ref,onMounted } from 'vue';
import axios from 'axios';

const info = ref([{
    UF_Money:'',
    UF_Date:'',
    F_Name:'',
    F_Fxiao:'',
    F_MinMoney:'',
    F_Year:'',
    U_Name:'',
    I_Money:''
}])

const page =ref({
    PageSize:2,
    PageIndex:1,
    totalCount:0,
    PageCount:0
})


const Id = ref('');
const Name = ref('');
const npageIndex= ref();

onMounted (()=>{
    ShowUserFinanCing();
})

const ShowUserFinanCing = ()=>{
    axios({
        method:'get',
        url:'http://localhost:62821/api/Financing/ShowUserFinanCing',
        params:{
            Id:Id.value,
            Name:Name.value,
            PageSize:page.value.PageSize,
            PageIndex:page.value.PageIndex
        }
    })
    .then(res=>{
        console.log(res);
        info.value = res.data.list;

        page.value.totalCount = res.data.totalCount;
        page.value.PageCount = res.data.PageCount;

    })
    .catch(err=>{
        console.log(err);
    })
}

const Size = (index:number)=>{
    if(index>=0||index<=page.value.PageCount){
        page.value.PageIndex = index;
        ShowUserFinanCing();
    }
    else{
        alert('输入有误');
    }
}

const Jump = ()=>{
    page.value.PageIndex = npageIndex.value;
    ShowUserFinanCing();
}

</script>
